<template>
  <div class="bg-fa of">
    <!-- 公共头 -->
    <AppHeader :inputName="user.name"/>
    <!-- /公共头 -->

    <section id="index" class="container">
      <header class="comm-title">
        <h2 class="fl tac">
          <span class="c-333">订单列表</span>
        </h2>
      </header>
      <el-table :data="list" border style="width: 100%">
        <el-table-column type="index" width="50" label="序号"></el-table-column>
        <el-table-column prop="updateTime" label="时间" width="230" ></el-table-column>
        <el-table-column prop="title" label="订单标题"></el-table-column>
        <el-table-column prop="totalFee" label="订单金额">
          <template slot-scope="scope">
              {{scope.row.totalFee / 100}} 元
          </template>
        </el-table-column>
        <el-table-column label="订单状态">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.orderStatus === '未支付'">
              {{scope.row.orderStatus}}
            </el-tag>
            <el-tag v-if="scope.row.orderStatus === '支付成功'" type="success">
              {{ scope.row.orderStatus }}
            </el-tag>
            <el-tag v-if="scope.row.orderStatus === '超时已关闭'" type="warning">
              {{scope.row.orderStatus}}
            </el-tag>
            <el-tag v-if="scope.row.orderStatus === '用户已取消'" type="info">
              {{scope.row.orderStatus}}
            </el-tag>
            <el-tag v-if="scope.row.orderStatus === '退款中'" type="danger">
              {{scope.row.orderStatus}}
            </el-tag>
            <el-tag v-if="scope.row.orderStatus === '已退款'" type="info">
              {{scope.row.orderStatus}}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="100" align="center">
          <template slot-scope="scope">
            <el-button v-if="scope.row.orderStatus === '未支付'" type="text" @click="cancel(scope.row.orderNo)">取消</el-button>
            <el-button v-if="scope.row.orderStatus === '用户已取消'" type="text" @click="userDeleteOrder(scope.row.orderNo)">删除</el-button>
            <el-button v-if="scope.row.orderStatus === '支付成功'" type="text" @click="userDeleteOrder(scope.row.orderNo)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </section>

    <!-- 公共底 -->
    <AppFooter />
    <!-- /公共底 -->
  </div>
</template>

<script>
import orderInfoApi from "../api/orderInfo"
import wxPayApi from "../api/wxPay"
import AppHeader from '../components/AppHeader'
import AppFooter from '../components/AppFooter'
import '../assets/css/reset.css'
import '../assets/css/theme.css'
import '../assets/css/global.css'
export default {
  components: {
    AppHeader, AppFooter
  },
  data() {
    return {
      list: [], //订单列表
      refundSubmitBtnDisabled: false, //防止重复提交
      // 浏览器缓存中的user信息
      user: {
        id: null,
        name: "未登录"
      }
    };
  },
  created() {
    if(JSON.parse(localStorage.getItem('user')).id !== null){
      this.user = JSON.parse(localStorage.getItem('user'))
      this.userOrderList(this.user.id)
    }
  },
  methods: {
    //显示订单列表
    userOrderList(userId){
      orderInfoApi.userOrderList(userId).then((response) => {
        this.list = response.data.userOrderList;
      });
    },
    //用户取消订单
    cancel(orderNo){
      wxPayApi.cancel(orderNo).then(response => {
        this.$message.success(response.message)
        //刷新订单列表
        this.userOrderList(this.user.id)
      })
    },
    //删除订单
    userDeleteOrder(orderNo){
      orderInfoApi.userDeleteOrder(orderNo).then(response => {
        this.$message.success(response.message)
        //刷新订单列表
        this.userOrderList(this.user.id)
      })
    }
  }
};
</script>
